<template>
	<view v-if="item" class="wrap-item">
		<view class="title-bg">
			<view class="must" 
				v-if="item.hasOwnProperty('require') && item.require"
			>
				*
			</view>
		
			<view class="title">
				{{ item.title }}
			</view>
		</view>
		
		<view class="wrap-textarea-bg"
			:class="item.require ? 'wrap-textarea-padding' : ''"
		>
			<textarea
				class="wrap-textarea f-30"
				:style="{ height: (item.height || textareaHeight) + 'rpx' }"
				:placeholder="item.place"
				placeholder-class="place"
				maxlength="-1"
				:type="item.hasOwnProperty('mode') ? item.mode : 'text'"
				v-model="modelValue"
			/>
			
			<view class="limit"
				v-if="item.hasOwnProperty('isLimit') && item.isLimit"
			>
				{{ modelValue.length }}/{{ maxLength }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 输入框的值
			 */
			value: {
				type: String,
				default: "",
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
			/**
			 * 默认高度
			 */
			textareaHeight: {
				type: String,
				default: "300",
			},
		},
		watch: {
			"modelValue": {
				handler() {
					if (this.maxLength > 0) {
						setTimeout(() => {
							this.modelValue = this.modelValue.substr(0, this.maxLength);
						}, 0);
					}
				},
				immediate: true
			}
		},
		computed: {
			maxLength() {
				var number = -1;
				if (this.item && this.item.hasOwnProperty("maxlength")) {
					number = this.item.maxlength;
				}
				return number;
			},
			modelValue: {
				set(val) {
					this.$emit("input", val);
				},
				get() {
					return this.value
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "../css/form.css";
	
	.wrap-textarea-bg {
		width: 100%;
		margin-top: 30rpx;
		overflow: hidden;
	}
	.limit {
		margin-top: 10rpx;
		width: 100%;
		text-align: right;
		color: #C6C6C6;
	}
</style>